<template>
    <div class="roles">
        <div class="rolesPage-top">
            <el-button 
            type="primary" 
            plain :icon="Plus" 
            @click="$store.commit('userCenter/userGroupSwitch',true)"
            >
                添加用户组
            </el-button>
            <el-button type="danger" plain :icon="Delete" @click="batchDel" :disabled="btnForbidden">
                批量删除
            </el-button>
        </div>
        <div>
            <addGroup :refresh="tableData"></addGroup>
        </div>
        <div class="rolesPage-bottom">
            <el-table :data="allTableData" style="width: 100%" @selection-change="optFor">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="用户组名称"  align="center" />
                <el-table-column prop="creationTime" label="创建时间"  align="center" >
                    <template #default="{row}">
                        {{ dayjs(row.creationTime).format('YYYY-MM-DD HH-mm')  }}
                    </template>
                </el-table-column>
                <el-table-column label="操作"  align="center">
                    <template #default="{row}">
                        <el-button @click="Permissions(row)">权限设置</el-button>
                        <el-button @click="isUpdateGroup(row)">修改</el-button>
                        <el-button @click="isDelGroup(row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <updateGroup :row="tableRowData" :isRefresh="tableData"></updateGroup>
            <setPermissions :row="PermissionsName" :rightPermissions="typeChange"></setPermissions>
        </div>
    </div>
</template>
<script setup>
import { Plus, Delete } from '@element-plus/icons-vue'
import addGroup from './addGroup/addGroup.vue'
import updateGroup from './addGroup/updateGroup.vue'
import setPermissions from './addGroup/setPermissions.vue'
import { nextTick, ref } from 'vue'
import { getAllGroup, delUserGroup, UpdateUserGroup, delManyUserGroup, getAllGroupTwo } from '@/api/group.js'
import { dayjs, ElMessageBox, ElMessage } from 'element-plus'
import { useStore } from 'vuex'
import _ from 'lodash'   
const store = useStore()
onMounted(()=>{
    tableData()
    
})
//获取表格数据
const allTableData = ref([])
const tableData = ()=>{
    getAllGroup().then(res=>{
        allTableData.value = res.data.data
    })
}

//删除用户组
const isDelGroup =async (id)=>{
    ElMessageBox.confirm('请确认是否删除', '删除弹窗', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then( async() => {
      const res = await delUserGroup({id})
      console.log('删除', res)
      ElMessage.success('删除成功')
      tableData()
    }).catch(()=>{
        ElMessage.warning('删除失败')
    })
}
//修改用户组
const tableRowData = ref({})
const isUpdateGroup = (row)=>{
    tableRowData.value = _.cloneDeep(row)  //lodash深拷贝
    store.commit('userCenter/userGroupUpdate',true)
}
//权限设置
const PermissionsName = ref()
let typeChange = ref([])
const Permissions =async (row)=>{
    store.commit('userCenter/isSetPermissions',true)
    PermissionsName.value = row
    const res = await getAllGroupTwo({id:row.id})
    typeChange.value = JSON.parse( res.data.data.roles).map(item=>Number(item))
}


//下面选择复选框时不禁用按钮
const optFor = (row)=>{
    ids.value = row
    if(row.length > 0){
        btnForbidden.value = false
    }else{
        btnForbidden.value = true
    }
}
const btnForbidden = ref(true)     //是否禁用删除按钮
//批量删除
const ids = ref([])  //获取id
const box = ref([])  //存放id
const batchDel = async()=>{
    ids.value.forEach(item=>{
        box.value.push(item.id)
    })
    console.log(box.value)
    if(!box.value) return
    ElMessageBox.confirm(
        '请确认是否删除',
        '删除弹窗',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async ()=>{
        const res = await delManyUserGroup({id:box.value})
        tableData()
        ElMessage.success('删除成功')
    }).catch(()=>{
        ElMessage.warning('取消删除')
    })
}
</script>

<style>

</style>